<!-- 
2019-05-10 前端hash路由原理

1，js中有两种方法可在不刷新页面的情况下，对页面内容进行修改，一种是ajax，另一种是哈希路由原理

先看一个简单的路由和页面内容关联的例子，要实现两个功能：
1.1. 浏览器的路由变化，页面内容跟着变化
1.2.页面内容变换，浏览器的内容跟着变化
实现过程：
1.3.设定一个页面按钮，点击按钮时，改变页面的内容
1.4.设定浏览器的内容，跟随页面内容的变化而变化，即：直接赋值给浏览器的hash属性就可以了
1.5.监听浏览器的hash值，如果hash改变了，则页面内容跟随变化

-->

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="UTF-8" />
  <title>hash路由</title>
  <script>
    window.onload=function(){
      var getnums=function(start, end, n){
        var arr=[];
        for(var i=0;i<n;i++){
          var randomnum=Math.random();
          var num=start+Math.round(randomnum*(end-start));
          arr.push(num);
        }
        console.log(arr);
        return arr;
      }


      function Ohash(){
        //debugger;
        this.ospan=document.querySelector('.ospan');
        this.obtn=document.querySelector('input');
      }
      Ohash.prototype.bind=function(){
        var that=this;
        this.obtn.onclick=function(){
          location.hash=getnums(3,108,6);
          that.ospan.innerHTML=location.hash.substring(1);
        }
        window.onhashchange=function(){
          that.ospan.innerHTML=location.hash.substring(1)||'';
        }
      }

      var Ohash_obj=new Ohash();
      Ohash_obj.bind();
    }
  </script>
</head>
<body>
  <div class='box'> 
    <input type="submit" value="触发按钮">
      <span class="ospan"></span>
    </div>
  </body>
</html>